<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <div>
          <div>
            <a-radio-group v-model="queryParam.writeoff" @change="$refs.table.refresh(true)">
              <a-radio :value="0">
                全部
              </a-radio>
              <a-radio :value="2">
                已核销
              </a-radio>
              <a-radio :value="1">
                未核销
              </a-radio>
            </a-radio-group>
          </div>
          <!-- 1未付款,2已付款;3,退款中;4,已退款 5.已发货 6已完成 -->
          <div class="margT10">
            <a-radio-group v-model="queryParam.status" @change="$refs.table.refresh(true)">
              <a-radio :value="0">
                全部
              </a-radio>
              <a-radio :value="2">
                已支付
              </a-radio>
              <a-radio :value="3">
                已核销
              </a-radio>
              <a-radio :value="4">
                已退款
              </a-radio>
              <!-- <a-radio :value="5">
                已发货
              </a-radio> -->
              <!-- <a-radio :value="6">
                已完成
              </a-radio> -->
            </a-radio-group>
          </div>
        </div>
        <div class="margT20">
          <a-form layout="inline">
            <a-row :gutter="20">
              <a-col :md="6" :sm="24">
                <a-form-item label="商品名称">
                  <a-input v-model="queryParam.product_name" placeholder="请输入商品名称"/>
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="24">
                <a-form-item label="核销码">
                  <a-input v-model="queryParam.writeoff_code" placeholder="请输入核销码"/>
                </a-form-item>
              </a-col>
              
              <a-col :md="12" :sm="24">
                <a-form-item label="核销时间段">
                  <a-range-picker showTime @change="changeTime" :format="dateFormat"/>
                </a-form-item>
              </a-col>
              
              <!-- <a-col :md="5" :sm="24">
                <a-form-item label="供应商">
                  <a-select v-model="queryParam.supplier_id" placeholder="请选择">
                    <a-select-option v-for="(item,index) in supplierList" :key="index" :value="item.id">{{item.contacts}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col> -->
          
              <a-col :md="!advanced && 8 || 24" :sm="24">
                <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                  <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                  <!-- <a-button style="margin-left: 8px" type="primary" v-action:backyzuordertn2>退单</a-button> -->
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
      
      <!-- <div class="showDetail">
        <div class="line">
          <div style="width: 300px;"><span class="label">核销数量：</span><span class="textValue">{{statisticsData.verification_number}}</span></div>
          <div><span class="label">核销总金额：</span><span class="textValue">{{statisticsData.verification_num}}</span></div>
        </div>
        <div class="line">
          <div style="width: 300px;"><span class="label">已完成数量：</span><span class="textValue">{{statisticsData.compeleted_number}}</span></div>
          <div><span class="label">已完成总金额：</span><span class="textValue">{{statisticsData.compeleted_num}}</span></div>
        </div>
        <div class="line">
          <div style="width: 300px;"><span class="label">接口下单数量：</span><span class="textValue">{{statisticsData.interface_number}}</span></div>
          <div><span class="label">接口下单金额：</span><span class="textValue">{{statisticsData.interface_sum}}</span></div>
        </div>
        <div class="line"><span class="label">下单总金额：</span><span class="textValue">{{statisticsData.updownorder_num}}</span></div>
      </div> -->
      <s-table
        class="margT10"
        ref="table"
        size="default"
        :rowKey="(record,index)=>{return index}"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        >
        <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @onSelect="onSelect(record, selected, selectedRows)" -->
        <span slot="shopInfo" slot-scope="text, record">
          <div>
            <span>商品名：{{record.product_name}}</span>
            <span class="margL10">是否可退单：<span :style="{color:record.is_refund==1?'green':'red'}">{{record.is_refund==1?'是':'否'}}</span></span>
            <!-- <span style="margin-left: 20px;">供应商：{{record.supplier_name||'---'}}</span> -->
            <a-tag style="margin-left: 10px;" :color="record.is_type == 1?'#66CC99':'#FF6666'">
              {{record.is_type == 1?'快递':'到店自提'}}
            </a-tag>
            <a-tag class="margL10" :color="$myUtils.getColor(record.status)">{{record.statusname}}</a-tag>
          </div>
          <div style="display: flex; margin-top: 6px;">
            <div style="min-width: 120px;">
              <div>价格：<span class="red">{{record.price}}￥</span></div>
              <div>数量：<span class="red">{{record.num}}</span></div>
              <div>总价：<span class="red">{{record.total}}￥</span></div>
            </div>
            <div class="margL10">
              <div>
                <div>下单商户：{{record.merchant_name||'---'}}</div>
              </div>
              <div>
                <div>下单时间：{{record.createtime||'---'}}</div>
              </div>
              <div v-if="record.status!=4">
                <a-tag :color="record.writeoff == 1?'red':'green'">
                  {{record.writeoff == 1?'未核销':'已核销'}}
                </a-tag>
                <span class="margL10" v-if="record.writeoff == 2">核销时间：{{record.verification_time||'---'}}</span>
              </div>
              <!-- <div>
                <div>抢购时间段：{{record.qianggouTime}}</div>
              </div>
              <div>
                <div>上架时间段：{{record.upTime}}</div>
              </div> -->
            </div>
            <div class="margL10" v-if="record.val">
              <div v-if="JSON.parse(record.val).contacts">
                <div>
                  <span>联系人：{{JSON.parse(record.val).contacts||'---'}}</span>
                </div>
                <div>
                  <span>手机号：{{JSON.parse(record.val).mobile||'---'}}</span>
                </div>
              </div>
              <div v-if="JSON.parse(record.val).idcard">
                <div><span>身份证号：{{JSON.parse(record.val).idcard||'---'}}</span></div>
              </div>
              <div v-if="JSON.parse(record.val).address">
                <div>收件地址：{{JSON.parse(record.val).address||'---'}}</div>
              </div>
            </div>
          </div>
        </span>
        <span slot="status" slot-scope="text, record">
          {{record.statusname}}
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
              <div v-if="record.is_type!=1">
                <a @click="handleDetail(record)">订单明细</a>
              </div>
              <a-popconfirm v-if="record.writeoff==1&&record.status!=4" title="确定要重发短信吗?" ok-text="确定" cancel-text="取消" @confirm="confirmSend(record)"
                @cancel="cancel(record)">
                <div><a>重发短信</a></div>
              </a-popconfirm>
              <div v-if="record.writeoff==1&&record.status!=4"><a @click="hexiaoBtn(record,'mu')">核销</a></div>
            
              <a-popconfirm
                v-if="record.status==2&&record.is_refund!=2"
                title="确定退单吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirmBack(record)"
                @cancel="cancel(record)"
              >
                <div><a>退单</a></div>
              </a-popconfirm>
              
              <!-- <a-popconfirm
                v-action:backyzuordertn2
                title="确定删除该订单吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirmDel(record)"
                @cancel="cancel(record)"
              >
                <div><a>删除</a></div>
              </a-popconfirm> -->
            </div>
          </template>
        </span>
      </s-table>
      <order-detail
        ref="orderDetail"
        :visible="orderDetailVisible"
        @hexiao="hexiao"
        @cancel="handleCancel"
      />
    </a-card>
    <a-modal
      title="核销"
      :visible="visible4hexiaoModel"
      @ok="handleOk4hexiao"
      @cancel="visible4hexiaoModel=false;writeoff_code=''"
    >
      <a-form-item label="核销短码">
        <a-input v-model="writeoff_code" placeholder="请输入核销短码"/>
        <a-button type="primary" @click="getCode">
          获取核销短码
        </a-button>
      </a-form-item>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'
import OrderDetail from './components/OrderDetail';
//引入vuex
import { mapGetters,mapActions } from 'vuex'
const columns = [
  {
    title: '订单编号',
    dataIndex: 'ordersn'
  },
  {
    title: '订单信息',
    dataIndex: 'shopInfo',
    scopedSlots: { customRender: 'shopInfo' }
  },
  // {
  //   title: '订单状态',
  //   dataIndex: 'status',
  //   scopedSlots: { customRender: 'status' }
  // },
  {
    title: '操作',
    dataIndex: 'action',
    width: '120px',
    scopedSlots: { customRender: 'action' }
  }
]
const list = {
  data: [
    {
      shopName: '某某足浴满100减20优惠卷',
      picture: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
      count: 1,
      price: 10,
      totalPrice: 10,
      orderCode: 'GZE1213453677',
      startTine: '2021-5-11 14:30:10',
      statusname: '已完成',
      wanchengTime: '2021-5-11 14:30:10',
      qianggouTime: '2021-5-11 14:30:10~2021-5-16 14:30:10',
      upTime: '2021-5-11 14:30:10~2021-5-16 14:30:10',
      tuidan:1
    }
  ],
  pageSize: 10,
  pageNo: 1,
  totalPage: 6,
  totalCount: 2
}
export default {
  components: {
    STable,
    OrderDetail
  },
  data () {

    this.columns = columns
    return {
      statisticsData: {
        verification_number: 20011,
        verification_num: 20000,
        compeleted_number: 20,
        compeleted_num: 1300,
        updownorder_num:30000,
        interface_number: 10,
        interface_sum: 2000,
      },
      dateFormat: 'YYYY/MM/DD hh:mm:ss',
      orderDetailVisible: false,
      orderDetailLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      record:'',
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.queryParam.merchant_id = localStorage.getItem('merchant_id')
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return this.$productApi.OrderPage(requestParameters)
          .then(res => {
            return res.data
          })
      },
      selectedRowKeys: [],
      visible4hexiaoModel:false,
      writeoff_code:'',
    }
  },
  computed:{
     ...mapGetters(['supplierList','order_id','flag']),
  },
  created() {
    //获取供应商列表
    // if(this.supplierList.length<=0){
    //   this.getSupplirPage()
    // }
  },
  mounted() {
  },
  methods: {
    moment,
    ...mapActions(['SET_ORDER_ID','GET_SUPPLIER_PAGE','SET_FLAG']),
    changeTime(val){
      console.log("val",val)
      this.starttime = moment(val[0]._d).format(this.dateFormat)
      this.endtime = moment(val[1]._d).format(this.dateFormat)
      console.log("val",this.starttime,this.endtime)
      this.queryParam.starttime = this.starttime
      this.queryParam.endtime = this.endtime
      this.$refs.table.refresh()
    },
    getSupplirPage() {
      const params = {
        pageNo:1,
        pageSize:1000
      }
      this.GET_SUPPLIER_PAGE(params)
    },
    getCode() {
      console.log("this.this.mdl",this.mdl)
      this.writeoff_code = this.mdl.writeoff_code
      console.log("this.writeoff_code",this.writeoff_code)
    },
    handleOk4hexiao() {
      if(this.writeoff_code!=this.mdl.writeoff_code){
        this.$message.error('核销码不匹配')
        return
      }
      const params = {
        id:this.mdl.id,//子表ID
        order_id: this.order_id,//母表ID
        writeoff:2
      }
      if(this.flag=='mu'){
        delete params.order_id
        this.$productApi.OrderSave(params).then(res=>{
          if(res.ret==200){
            this.$message.success('核销成功')
            this.visible4hexiaoModel=false;
            this.writeoff_code=''
            this.$refs.table.refresh()
          }
        })
      }else{
        this.$productApi.OrderlistSave(params).then(res=>{
          if(res.ret==200){
            this.$message.success('核销成功')
            this.visible4hexiaoModel=false;
            this.writeoff_code=''
            this.bus.$emit('refreshTable')
          }
        })
      }
    },
    // 订单明细
    handleDetail(record) {
      this.orderDetailVisible = true
      // this.record = record
      console.log("SET_ORDER_ID",record.id)
      this.SET_ORDER_ID(record.id)
      // this.bus.$emit()
    },
    //事件监听，订单明细中传过来的record
    hexiao(record) {
      this.visible4hexiaoModel = true
      this.mdl = record
    },
    // 核销点击事件
    hexiaoBtn(record,flag) {
      this.mdl = record
      this.SET_FLAG(flag)
      this.visible4hexiaoModel = true
    },
      // 搜素模糊查询
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    onSelect(record, selected, selectedRows) {
      console.log('record',record)
      console.log('selectedRows',selectedRows)
    },
    handleAdd () {
      this.mdl = null
      this.visible = true
    },
    confirmSend(record) {
      
    },
    handleEdit (record) {
      this.visible = true
      this.mdl = { ...record }
    },
    // 确定完成订单
    confirmwancheng(e){
      this.visible4hexiaoModel = false
      // this.$message.success('操作成功');
    },
     // 确定退单
    confirmBack(e) {
      console.log(e);
      this.$productApi.OrderRefund({id: e.id}).then(res => {
        // 刷新表格
        this.$refs.table.refresh()
        this.$message.success('退单成功');
      }).catch(error => {
        console.log('-------------error------------', error)
      })
    },
    // 确定删除
    confirmDel(e) {
      // const form = this.$refs.createModal.form
      console.log('confirmDel',e);
      this.$productApi.OrderDel({id: e.id}).then(res => {
        
        // 刷新表格
        this.$refs.table.refresh()
        this.$message.success('删除成功');
      }).catch(error => {
        console.log('-------------error------------', error)
      })
    },
    cancel(e) {
      console.log(e);
      this.$message.error('已取消');
    },
    handleCancel () {
      this.orderDetailVisible = false
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    resetSearchForm () {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    // 重置
    reset () {
      this.queryParam = {}
      // 刷新表格
      this.$refs.table.refresh()
    },
  },
}
</script>
<style lang="less">
/* 文字溢出隐藏并显示省略号 */
.showDetail{
  width: 100%;
  .line{
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: flex-start;
    .textValue{
      font-size: 20px !important;
      color: #1890FF;
      margin-right: 20px;
    }
  }
}
.textfont{
  width: 200px;
  height: 40px;
  /* height: 100%; */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:2; /* 设置行数 */
	-webkit-box-orient:vertical;
}
.ant-tooltip-inner{
  width:300px !important;
}
.ant-tooltip-placement-left{
  left: 830px !important
}
</style>
